<template>
  <div class="cardRegister-wrapper">
    <section>
      <el-form
        ref="form"
        :model="queryForm"
        :inline="true"
        class="queryForm adjustCondition"
      >
        <el-form-item label="卡号查询:" label-width="75px">
          <div style="width: 200px">
            <el-input
              v-model="queryForm.keyword"
              size="small"
              placeholder="请输入卡内号/卡序号查询"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="卡状态:">
          <div style="width: 160px">
            <el-select clearable v-model="queryForm.state" placeholder="---请选择---">
              <el-option
                v-for="item in  $dictUtils.getDictList('cardState')"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)">
              </el-option>
            </el-select>
          </div>
        </el-form-item>

        <el-form-item label="卡类型:">
          <div style="width: 160px">
            <el-select clearable v-model="queryForm.cardType" placeholder="---请选择---">
              <el-option
                v-for="item in  $dictUtils.getDictList('cardType')"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="卡用途:">
          <div style="width: 160px">
            <el-select clearable v-model="queryForm.cardUsage" placeholder="---请选择---">
              <el-option
                v-for="item in  $dictUtils.getDictList('cardUsage')"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="but-container">
            <el-button
              type="primary"
              size="small"
              class="search-btn"
              @click="
                getList"
              >查询</el-button>
            <el-button size="small" @click="reset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </section>
    <section>
      <el-button size="small" @click="importData" v-if="hasPermission('truck:cardRegister:import')">导入</el-button>
      <el-button size="small" @click="exportExcel" v-if="hasPermission('truck:cardRegister:export')">导出</el-button>
      <section class="right-but" style="display:flex">
        <el-button type="text" style="margin-right:-13px"  @click="refreshList()">
          <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png" >
        </el-button>
        <PopoverBut :checkedProps="checkedProps"  :options="options" @getCheckeds="handlerCloumn"></PopoverBut>
      </section>
    </section>

    <el-table
      size="mini"
      v-loading="loading"
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      border
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }"
      :row-class-name="tableRowClassName"
       @sort-change="sortthiscolumn"
    >
      <el-table-column type="index" label="序号" width="70" align="center">
        <template slot-scope="scope">
          <span>{{
            (page.pageNo - 1) * page.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="cardType" label="卡类型"  sortable="card" width="120">
        <template slot-scope="scope">
          {{$dictUtils.getDictLabel("cardType", scope.row.cardType, "") | noValue}}
        </template>
      </el-table-column>
      <el-table-column prop="cardNumber" sortable="card" label="卡序号" min-width="130"> </el-table-column>
      <el-table-column prop="cardInnerNumber" sortable="card" label="卡内号" min-width="130"> </el-table-column>
      <el-table-column prop="cardUsage" label="卡用途" min-width="100">
        <template slot-scope="scope">
          {{$dictUtils.getDictLabel("cardUsage", scope.row.cardUsage, "") | noValue}}
        </template>
      </el-table-column>
      <el-table-column prop="cardHolder" label="当前持卡人" min-width="170">
        <template slot-scope="scope">
            <div v-if="scope.row.cardUsage">
          <div v-if="scope.row.cardUsage === 1">
            <p>{{scope.row.payeeName}}</p>
            <p>{{scope.row.payeeIdCard}}</p>
          </div>
          <div v-if="scope.row.cardUsage === 2">
            <p><span v-if="scope.row.driver !== undefined">{{scope.row.driver.name}}</span> <span>{{scope.row.truckNumber}}</span></p>
          </div>
          <div v-if="scope.row.cardUsage === 3">
            <p><span v-if="scope.row.user !== undefined">{{scope.row.user.name}}</span> </p>
          </div>
            </div>
            <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="卡状态" min-width="90px" align="center">
        <template slot-scope="scope">
          <div class="state" :class="{empty: scope.row.state===1,normal: scope.row.state===2, freeze:scope.row.state===3,invalid:scope.row.state===4}"><span></span>{{$dictUtils.getDictLabel("cardState", scope.row.state, "")}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="导入时间" min-width="200"> </el-table-column>
      <span v-for="(item,index) in checkedProps" :key="index">
                    <el-table-column prop="createBy.loginName" min-width="110px" :label="item" v-if="item==='创建人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.createBy">
                      <span v-if="scope.row.createBy.loginName">
                          {{scope.row.createBy.loginName | noValue}}
                      </span>
                      <span v-else>--</span>
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
          <el-table-column prop="createDate" :label="item"  min-width="200px" v-if="item==='创建时间'">
            <template slot-scope="scope">
                {{scope.row.createDate | noValue}}
            </template>
        </el-table-column>
          <el-table-column prop="updateBy.loginName" min-width="120px" :label="item" v-if="item==='上次操作人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.updateBy">
                      <span v-if="scope.row.updateBy.loginName">
                          {{scope.row.updateBy.loginName | noValue}}
                      </span>
                      <span v-else>--</span>
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
          <el-table-column prop="updateDate" :label="item"  min-width="200px" v-if="item==='上次操作时间'">
              <template slot-scope="scope">
                  {{scope.row.updateDate | noValue}}
              </template>
          </el-table-column>
      </span>
      <el-table-column prop="address" label="操作" width="202px">
        <template slot-scope="scope">
          <el-link style="color: red" type="primary" :underline="false" @click="InvalidTag(scope.row)"
                   v-if="scope.row.state !== 4"
          >标记为无效</el-link
          >
          <el-link style="color: red" type="primary" :underline="false" @click="recoveryEffective(scope.row)"
                   v-if="scope.row.state === 4"
          >恢复为有效</el-link
          >
          <el-link type="primary" :underline="false" @click="view(scope.row)"
          v-if="hasPermission('truck:cardRegister:view')"
            >操作记录</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="page.pageSize"
      :current-page="page.pageNo"
      layout="total,sizes,prev, pager, next, jumper"
      :total="page.total"
    >
    </el-pagination>
    <RecordForm
      ref="recordForm"
      @refreshDataList="getList"
    ></RecordForm>
    <EditForm
      ref="editForm"
      @refreshDataList="getList"
    ></EditForm>
    <InputFrom ref="inputForm" @refreshDataList="getList"></InputFrom>
    <el-dialog title="提示" :visible.sync="visible" @open="handleHint" width="344px" @close="handleTimer" class="note">
      <div style="width: 100%;">
        <p>磁卡使用中，不允许标记为无效！</p>
        <p>{{time}}s将自动关闭</p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getList, delRegiste, modifyState } from '@/api/truck/cardRegiste/cardRegiste.js'
import RecordForm from './recordForm'
import EditForm from './editForm'
import InputFrom from './inputForm'
import PopoverBut from '@/components/button/popoverBut'
const options1 = []
export default {
  components: {
    RecordForm,
    EditForm,
    PopoverBut,
    InputFrom
  },
  data () {
    return {
      visible: false,
      checkedProps: options1,
      time: '',
      queryForm: {
        keyword: '',
        state: '',
        cardType: '',
        cardUsage: ''
      },
      options: [
        {
          label: '创建人',
          key: 'createBy.loginName'
        },
        {
          label: '创建时间',
          key: 'createDate'
        },
        {
          label: '上次操作人',
          key: 'updateBy.loginName'
        },
        {
          label: '上次操作时间',
          key: 'updateDate'
        }],
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 0
      },
      tableData: [],
      orderBy: {
        name: 'create_date',
        method: 'desc'
      },
      loading: false
    }
  },
  methods: {
    // 获取列表带分页
    getList () {
      this.loading = true
      getList({
        pageSize: this.page.pageSize,
        pageNo: this.page.pageNo,
        orderBy: this.orderBy.name,
        orderByAORC: this.orderBy.method,
        keyword: this.queryForm.keyword,
        state: this.queryForm.state,
        cardType: this.queryForm.cardType,
        cardUsage: this.queryForm.cardUsage
      }).then(({data}) => {
        if (data.code === '200') {
          this.tableData = data.result.list
          this.page.total = data.result.count
        }
        this.loading = false
      })
    },
    modifyState (id, state) {
      modifyState({
        id: id,
        state: state
      }).then(({data}) => {
        if (data.code === '200') {
        }
      })
    },
    // 发卡记录
    view (row) {
      this.$refs.recordForm.init('send', row)
    },
    // 重置查询条件
    reset () {
      this.queryForm = {}
      this.getList()
    },
    edit (id) {
      this.$refs.editForm.init('edit', id)
    },
    add () {
      this.$refs.editForm.init('add')
    },
    delRegiste (ids) {
      this.$confirm('此操作将永久删除该卡片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then((res) => {
        delRegiste({
          ids: ids
        }).then(({data}) => {
          if (data.code === '200') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          }
        })
      })
    },
    // 标记为无效
    InvalidTag (row) {
      if (row.state === 1) {
        this.$confirm('标记为无效后，该卡将不能使用。确认将改卡标记为无效吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          modifyState({
            id: row.id,
            state: 4
          }).then(({data}) => {
            if (data.code === '200') {
              this.$message({
                message: '已将【' + row.cardNumber + '】标记为无效卡',
                type: 'success'
              })
            }
          })
          this.getList()
        })
      } else {
        // this.$alert('磁卡使用中，不允许标记为无效！', '提示', {
        //   confirmButtonText: '好的，我知道了',
        //   callback: action => {
        //   }
        // })
        this.handleHint()
      }
    },
    // 标记为无效提示
    handleHint () {
      this.time = 3
      const that = this
      this.visible = true
      if (!this.timer) {
        this.timer = setInterval(function () {
          that.time--
          if (that.time === 0) {
            that.visible = false
          }
        }, 1000)
      }
    },
    handleTimer () {
      clearInterval(this.timer)
      this.timer = null
    },
    // 恢复为有效
    recoveryEffective (row) {
      modifyState({
        id: row.id,
        state: 1
      }).then(({data}) => {
        if (data.code === '200') {
          this.$message({
            message: '已将【' + row.cardNumber + '】恢复为有效卡',
            type: 'success'
          })
        }
      })
      this.getList()
    },
    // 导入
    importData () {
      // 导入
      this.$refs.inputForm.init('importData')
    },
    // 导出
    exportExcel () {
      this.$utils.download('/truck/cardRegister/export')
    },
    refreshList () {
      this.getList()
    },
    // 排序
    sortthiscolumn (a) {
      this.orderBy.name = a.prop
      this.page.pageNo = 1
      if (a.order === 'ascending') {
        this.orderBy.method = 'asc'
      } else {
        this.orderBy.method = 'desc'
      }
      this.getList()
    },
    // 是否显示某列数据
    handlerCloumn (e) {
      this.checkedProps = e
    },
    handleSizeChange (e) {
      this.page.pageSize = e
      this.getList()
    },
    handleCurrentChange (e) {
      this.page.pageNo = e
      this.getList()
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
<style lang="scss" scoped>
  @import '@/assets/scss/config.scss';
  ::v-deep.el-select-dropdown__item:first-child.selected,::v-deep.el-select-dropdown__item:first-child.hover,::v-deep.el-select-dropdown__item:first-child:hover{
    background: #FFFFFF;
    color: #333333;
  }
  .cardRegister-wrapper{
    position: relative;
    ::v-deep.el-form{
      .el-form-item{
        margin-right: 27px;
        margin-bottom: 20px;
      }
    }
    ::v-deep.el-table{
      .state{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        span{
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 5px;
          vertical-align: middle;
        }
      }
      .state.empty{
        color: #999999;
        span{
          background: #ADADAD;
        }
      }
      .state.normal{
        color: #1890FF;
        span{
          background: #2797FE;
        }
      }
      .state.freeze{
        color: #F59A23;
        span{
          background: #F59A23;
        }
      }
      .state.invalid{
        color: #FF3E3E;
        span{
          background: #FF3E3E;
        }
      }
      td .cell{
        p{
          margin: 0;
        }
        .el-link{
          .el-link--inner{
            margin-right: 16px;
          }
        }
        .el-link:last-child{
          .el-link--inner{
            margin-right: 40px;
          }
        }
      }
      td:last-child{
        .cell{
          padding-right: 0;
        }
      }
    }
    .total-card{
      position: absolute;
      bottom: 0;
      font-size: 13px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      display: inline-block;
      line-height: 32px;

    }
  }
.el-table .success-row {
  background: #f0f9eb;
}
::v-deep .el-table .warning-row {
  background: #f7f7f7;
}
    .right-but{
        margin-bottom: 10px;
    }

  ::v-deep .el-dialog__wrapper.note{
    .el-dialog__body{
      padding-bottom: 40px !important;
    }
    p{
      text-align: center;
    }
    p:first-child{
      margin-top: 10px;
    }
    p:last-child{
      color: $--color-primary-liyu;
      font-size: 12px;
      margin-top: 30px;
    }
  }
</style>
